<template>
  <section id="gallery" class="py-12 bg-neutral">
    <div class="container mx-auto px-4">
      <div class="text-center mb-10">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">精彩作品集</h2>
        <p class="text-gray-600 max-w-2xl mx-auto">用户们用漫文生成创作的精彩漫画作品</p>
      </div>
      
      <!-- 筛选栏 -->
      <div class="flex flex-wrap justify-center gap-3 mb-8">
        <button 
          @click="setFilter('全部作品')"
          :class="activeFilter === '全部作品' ? 'bg-primary text-white' : 'bg-white hover:bg-gray-100'"
          class="px-4 py-2 rounded-lg transition-colors"
        >全部作品</button>
        <button 
          @click="setFilter('日系风格')"
          :class="activeFilter === '日系风格' ? 'bg-primary text-white' : 'bg-white hover:bg-gray-100'"
          class="px-4 py-2 rounded-lg transition-colors"
        >日系风格</button>
        <button 
          @click="setFilter('国风风格')"
          :class="activeFilter === '国风风格' ? 'bg-primary text-white' : 'bg-white hover:bg-gray-100'"
          class="px-4 py-2 rounded-lg transition-colors"
        >国风风格</button>
        <button 
          @click="setFilter('科幻题材')"
          :class="activeFilter === '科幻题材' ? 'bg-primary text-white' : 'bg-white hover:bg-gray-100'"
          class="px-4 py-2 rounded-lg transition-colors"
        >科幻题材</button>
        <button 
          @click="setFilter('爱情故事')"
          :class="activeFilter === '爱情故事' ? 'bg-primary text-white' : 'bg-white hover:bg-gray-100'"
          class="px-4 py-2 rounded-lg transition-colors"
        >爱情故事</button>
      </div>
      
      <!-- 作品网格 -->
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <GalleryItem 
          v-for="item in galleryItems" 
          :key="item.id"
          :item="item"
        />
      </div>
      
      <div class="text-center mt-10">
        <button class="px-6 py-3 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
          浏览更多作品 <i class="fa fa-arrow-right ml-1"></i>
        </button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import GalleryItem from './GalleryItem.vue'

const activeFilter = ref("全部作品")
const galleryItems = ref([
  { id: 1, title: "林间奇遇", category: "国风 · 奇幻", image: "https://picsum.photos/id/1024/400/500" },
  { id: 2, image: "https://picsum.photos/id/1027/400/500" },
  { id: 3, image: "https://picsum.photos/id/1028/400/500" },
  { id: 4, image: "https://picsum.photos/id/1039/400/500" },
  { id: 5, image: "https://picsum.photos/id/1040/400/500" },
  { id: 6, image: "https://picsum.photos/id/1041/400/500" },
  { id: 7, image: "https://picsum.photos/id/1047/400/500" },
  { id: 8, image: "https://picsum.photos/id/1059/400/500" }
])

const setFilter = (filter) => {
  activeFilter.value = filter
}
</script>